<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/css/plugins/layui/css/layui.css}">
    <style>
        body {
            padding: 10px;
        }
    </style>
</head>
<body>
    <!--
    本「综合演示」包含：自定义头部工具栏、获取表格数据、表格重载、自定义模板、单双行显示、单元格编辑、自定义底部分页栏、表格相关事件与操作、与其他组件的结合等相对常用的功能，以便快速掌握 table 组件的使用。
    -->
    <table class="layui-hide" id="test"></table>

    <script th:src="@{/js/plugins/layui/layui.js}"></script>
    <script>
        layui.use(function(){
            var treeTable = layui.treeTable;
            var layer = layui.layer;
            var dropdown = layui.dropdown;
            // 渲染
            var inst = treeTable.render({
                elem: '#test',
                url: '/permission/treelist', // 此处为静态模拟数据，实际使用时需换成真实接口
                tree: {
                },
                maxHeight: '501px',
                toolbar: '#toolbarDemo',
                cols: [
                        [
                        {type: 'checkbox', fixed: 'left'},
                        {field:'id', fixed: 'left', width:80, title: 'ID', sort: true},
                        {field:'name',  title: '权限名称', width: 180, fixed: 'left',templet: function(d){
                                return d.menuName;
                            }},
                        {field:'menuType',  title: '权限类型'},
                        {field:'url',  title: '请求地址'},
                        {field:'perms',  title: '权限标识'},
                        {fixed: 'right', title:'操作', width: 134, minWidth: 125, templet: '#toolDemo'}
                    ]
                ],
                page: true
            });
        });
    </script>
    </body>
</html>